/* eslint-disable react/prop-types */
/* eslint-disable react/destructuring-assignment */
import React, { useState, useEffect } from 'react';
import Hotkeys, { Commands, getExplain } from '@dc/hotkeys';
import styles from './index.module.less';

const withBase = (Component) => {
  return (props) => {
    const [focused, setFocused] = useState(false);
    const [command, setCommand] = useState(null);

    window.console.log('---render---0---');

    // const onKeyup = (e) => {
    //   setCommand(e);
    //   window.console.log('??', focused);
    // };
    // useEffect(() => {
    //   window.console.log('+++++++');
    //   window.addEventListener('keyup', onKeyup);
    //   return () => {
    //     window.console.log('-------');
    //     window.removeEventListener('keyup', onKeyup);
    //   };
    // }, []);

    useEffect(() => {
      let deactive = () => {};
      if (props.bindCommand) {
        deactive = Hotkeys.activate({
          GUID: '22e09',
          domain: 'aaa',
          command: props?.bindCommand,
          onCommand: (e) => {
            setCommand({ ...e });
          },
        });
      }
      return deactive;
    }, [props?.bindCommand]);

    return (
      <div
        tabIndex="0"
        onFocus={() => {
          setFocused(true);
        }}
        onBlur={() => {
          setFocused(false);
        }}
        className={styles.root}
        title={props.bindCommand && getExplain(props.bindCommand)}
        onClick={(e) => {
          window.console.log(e);
        }}
      >
        <Component {...props} focused={focused} command={command} />
      </div>
    );
  };
};

export default withBase;
